import { Form, Modal, AutoComplete, Input, message, Transfer, Row, Col, Checkbox, Divider } from 'antd';
import React, { useState, useEffect } from 'react';
import { HTTP_STATUS } from "@/generic/ConfigParams";
import { queryGroups } from "../service";
import { queryUsers } from '@/services/user';

const FormItem = Form.Item;

const permItems = [
    { key: 0x0001, title: '查询、搜索' },
    { key: 0x0002, title: '创建、上传' },
    { key: 0x0004, title: '重命名' },
    { key: 0x0008, title: '修改' },
    { key: 0x0010, title: '复制' },
    { key: 0x0020, title: '移动' },
    { key: 0x0040, title: '删除' },
    { key: 0x0080, title: '分享' },
    { key: 0x0100, title: '加锁' },
    { key: 0x0200, title: '下载' },
    { key: 0x80000000, title: '可执行' },
    { key: 0xFFFFFFFF, title: '全部权限' },
    { key: 0x00000000, title: '没有权限' },
];

const CheckboxGroups = props => {

    const { items, setPermTarget, } = props;
    const [CheckBoxRow, setCheckBoxRow] = useState([]);

    useEffect(()=> {
        if (items.length > 0) {
            const tempRow = [];
            items.forEach((item, index) => {
                tempRow.push(
                    <Col span={8} key={index}>
                        <Checkbox value={item.value}>{item.text}</Checkbox>
                    </Col>
                );
            });
            setCheckBoxRow(tempRow);
        }
        else {
            setCheckBoxRow([]);
        }
    }, [items])
    

    return (
        <Checkbox.Group 
            style={{ width: '100%' }} 
            onChange={checkedValues => { 
                console.log("==>> checkedValues", checkedValues)
                setPermTarget(checkedValues);
            }}
        >
            <Row>{CheckBoxRow}</Row>
        </Checkbox.Group>
    );

}

const PermissionModal = props => {

    const { modalVisible, onCancle, permObject} = props;
    const [targetKeys, setTargetKeys] = useState([]);
    const [CheckboxItems, setCheckboxItems] = useState([]);
    const [permTargets, setPermTargets] = useState([]);

    const handleChange = targetKeys => {
        setTargetKeys(targetKeys);
        console.log("==>> targetKeys", targetKeys)
    }

    const okHandle = () => {
        console.log("==>> targetKeys", targetKeys)
        console.log("==>> permTargets", permTargets)
        if (permTargets.length > 0 && targetKeys.length > 0) {
            const diskPermisson = {};
            let permValue = 0;
            targetKeys.forEach(item => {
                permValue = permValue | item;
            })
            permTargets.forEach(item => {
                diskPermisson[item] = permValue;
            })
            console.log('===>> permValue', permValue, diskPermisson)
        }
    }

    useEffect(()=> {
        console.log("===>> permObject", permObject)
        setCheckboxItems([]);
        if (!permObject) return;
        const POList = [];
        if (permObject == 'group') {
            queryGroups({}, true).then(content => {
                const results = content.results;
                if (results && results.length > 0) {
                    results.forEach(item => {
                        POList.push({
                            value: item.name,
                            text: item.name,
                        });
                    })
                }
                setCheckboxItems(POList);
            })
        }
        else if (permObject == 'user'){
            queryUsers({}, true).then(content => {
                const results = content.results;
                if (results && results.length > 0) {
                    results.forEach(item => {
                        POList.push({
                            value: item.id,
                            text: `${item.nickName}(${item.username})`,
                        });
                    })
                }
                setCheckboxItems(POList);
            })
        }
    }, [permObject])

    return (
        <>
            <Modal
                destroyOnClose
                title={`${(permObject && permObject == 'group') ? '组' : '用户'}权限`}
                visible={modalVisible}
                onOk={okHandle}
                onCancel={onCancle}
                // width="80%"
            >
                <div>
                    <CheckboxGroups 
                        items={CheckboxItems}
                        setPermTarget={setPermTargets}
                        SPAN={''}
                    />
                    <Divider />
                    <Transfer
                        dataSource={permItems}
                        targetKeys={targetKeys}
                        onChange={handleChange}
                        render={item => item.title}
                    />
                </div>
            </Modal>
        </>
    );
}

export default PermissionModal;